<template>
	<view class="content">
		<g-watermark />
		<List :url="url" :list.sync="list" type='inbox' @look="_handleLook" :isChecked.sync="isChecked"
			@delete="_handleDelete" @transmit="_handleTransmit" @click="_handleLook">
			<template v-slot:search>
				<view style="margin: 20rpx 0;">
					<u-row gutter="16">
						<u-col :span="12">
							<u-search placeholder="搜索" :show-action="false" :input-style="{fontSize:'28rpx'}"
								:height="50" v-model="queryParam.what"></u-search>
						</u-col>
					</u-row>
				</view>
				<view style="display: flex;justify-content: center;align-items: center;margin-top: 20rpx;">
					<u-button size="mini" :hover-class="'buttons'"
						:custom-style="{width:'200rpx',backgroundColor:'#0097ff',padding:'20rpx',border:'none',color:'#fff', fontSize:'32rpx'}"
						@click="formSearch">查询</u-button>
				</view>
			</template>
			<template v-slot:content="{item}">
				<view class="list_item_info">
					<view class="list_item_info_item">
						<view class="title word-overflow">
							<view :style="{fontWeight: item.readed?'':'bold'}">{{item.subject}}</view>
						</view>
						<view>
							{{item.sender}}
						</view>
					</view>
					<view class="list_item_info_item">
						<view class="msg_level">
							<!-- {{item.level === 0 ? '普通' : item.level === 1 ? '紧急' : ''}} -->
						</view>
						<view class="send_time">
							{{item.sendTime}}
						</view>
					</view>
				</view>
			</template>
		</List>
		<u-action-sheet :list="moveOptions" v-model="showMove" @click="handleSelectMove"></u-action-sheet>
		<u-action-sheet :list="readOptions" v-model="showRead" @click="handleSelectRead"></u-action-sheet>
		<view class="body_bottom" v-if="isChecked">
			<view @click="_handleCancel">
				取消
			</view>
			<view @click="_handleSelectAll">
				全选
			</view>
			<view @click="_handleDeleteBatch" style="color:red">
				删除
			</view>
			<view @click="showRead=true">
				置为
			</view>
			<view @click="showMove = true">
				移动到
			</view>
		</view>
	</view>
</template>

<script>
	import {
		postFormAction
	} from '@/utils/request.js';
	import List from '../common/list.vue'
	import listContent from "@/pages/mixin/listMixin.js";
	import externalEmailMixin from "../../mixin/externalEmailMixin.js";
	export default {
		components: {
			List
		},
		mixins: [listContent,externalEmailMixin],
		data() {
			return {
				url: {
					list: '/email/listInBox',
					delete: '/email/delMail',
					setReaded: '/email/setReaded',
					fetchMail: '/email/fetchMail',
					moveMail: '/email/moveMail'
				},
				type:'inbox',
			}
		},
		methods: {
			_handleRefresh() {
				this.formSearch()
			},
			search() {
				this.page = 1
				this.isChecked = false
				this.getFetchMailData()
				// this.getListData();
			},
			formSearch() {
				this.page = 1
				this.isChecked = false
				this.getListData();
			},

			//更新邮件
			async getFetchMailData() {
				try {
					uni.showLoading({
						icon: 'none',
						title: '更新邮件中...'
					})
					const res = await postFormAction(this.url.fetchMail, {
						emailId: this.emailInfo.id
					})
					console.log('resres', res)
					if (res.data && res.data.res == 0) {
						uni.showToast({
							icon: "none",
							title: '邮件更新成功'
						})
					}
					this.getListData();
					uni.hideLoading()
				} catch (e) {
					console.log("getFetchMailData", e)
					uni.hideLoading()
				}
			},
		}

	}
</script>

<style lang="less" scoped>
	.content {
		padding-bottom: 100rpx;

		.list_item_info {
			display: flex;
			flex-direction: column;
			gap: 20rpx;
			padding: 20rpx;
			border-bottom: 1px solid rgba(0, 0, 0, .1);

			&_item {
				display: flex;
				justify-content: space-between;
				align-items: center;
				gap: 20rpx;

				.title {
					flex: 1;
					white-space: normal;
					word-break: break-all;
					font-weight: bold;
				}

				.send_time,
				.msg_level {
					color: #999;
				}
			}
		}

		.body_bottom {
			position: fixed;
			bottom: 0;
			height: 100rpx;
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-around;
			gap: 20rpx;
			background: #FFFFFF;
			box-shadow: 0rpx -2rpx 16rpx 0rpx rgba(0, 0, 0, 0.1);
		}
	}
</style>